<!DOCTYPE html>
<html ng-app="ngMap">
<head>
  <style type="text/css">
td, th {
    border: 1px #ccc solid;
}
  </style>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script>

angular.module('ngMap').controller('MyCtrl', function($scope, $http) {
  var vm = this;
  $scope.markers = [];
  // create an aircraft list 
  $scope.aircraft_list = []
  $http.get("flight_info.txt").success(function (response) { 
    var flights_data = response
    console.log(typeof(flights_data))
    vm.allShapes = [
    // {name: "polyline", path: $scope.path_list}
  ];
    count = 0
    for (var key in response) {
      // append aircraft name in aircraft list (hex code for the aircraft)
      console.log(key)
      count = count + 1
      flight_track_list = response[key]
      console.log(flight_track_list.length)
      path_list = []
      for (var i = 0; i < flight_track_list.length; i++) {
        // ignore the empty lat long for flight as will create noise when joining co-ordinates
        if (flight_track_list[i]["lat"] == "" & flight_track_list[i]["lon"] == ""){
          continue;
        };
        // create a position 
        pos = {}
        pos["id"] = "1"
        pos["pos"] = [flight_track_list[i]["lat"], flight_track_list[i]["lon"]]
        path_list.push([flight_track_list[i]["lat"], flight_track_list[i]["lon"]])
        // console.log(flight_track_list[i]["hex"])
        pos["flight_name"] =  "F: "+flight_track_list[i]["hex"];
        pos["icon"] = "dot.png"
        // console.log(typeof(pos["flight_name"]))
        $scope.markers.push(pos)
      };
      if (path_list.length > 0){
         $scope.aircraft_list.push(key);
         vm.allShapes.push({name:"polyline", path: path_list});
    };
      if (count == 10){
        break
      };
    }; 

    function clear_flight_info(){

    };

    function show_flight_info(flight_num){

    };
  });
  
  
  // $scope.markers = [
  //     {
  //       "id": "1",
  //       "pos": [40.74,-74.18],
  //       "flight_name":"inf=digo", 
  //       "icon": "dot.png"
  //     }, {
  //       "id": "1",
  //       "pos": [40.64,-74.10],
  //       "flight_name":"inf=digo", 
  //       "icon": "dot.png"
  //     },
  //     {
  //       "id": "1",
  //       "pos": [40.54,-74.05],
  //       "flight_name":"inf=digo", 
  //       "icon": "dot.png"
  //     },
  //     {
  //       "id": "1",
  //       "pos": [40.44,-74],
  //       "flight_name":"inf=digo", 
  //       "icon": "dot.png"
  //     }
  //   ]
// [[40.74,-74.18],[40.64,-74.10],[40.54,-74.05],[40.44,-74]]
  console.log($scope.path_list)
  
});
</script>
</head>

<!-- for icons place below code in the marker tag -->

<body ng-controller="MyCtrl as vm">
  <ng-map zoom="11" center="[27.327621, 77.587315]">
        <marker ng-repeat="p in markers" position="{{p.pos}}" title="{{p.flight_name}}" icon="{path:'CIRCLE', fillOpacity: 0.5,fillColor: 'red',strokeOpacity: 0.1,strokeColor: 'red',strokeWeight: 1.0, scale: 1}"></marker>
     <shape ng-repeat="shape in vm.allShapes"
       name="{{shape.name}}"
       stroke-color="#FF0000"
       stroke-opacity="0.8"
       path="{{shape.path}}"
       paths="{{shape.paths}}"
       bounds="{{shape.bounds}}"
       center="{{shape.center}}"
       radius="{{shape.radius}}"
       stroke-weight="2"></shape>
  </ng-map>
<div>
  <table>
    <tr>
    <th>Aircrafts</th>
  </tr>
  <tr ng-repeat="row in aircraft_list">
    <td>
      {{ row }}
    </td>
  </tr>
  </table>

</div>

</body>
</html>